<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
           
            <el-form-item label="商品类型">
                <!-- <el-select v-model="formInline.region" placeholder="Activity zone">
                    <el-option label="Zone one" value="shanghai"></el-option>
                    <el-option label="Zone two" value="beijing"></el-option>
                </el-select> -->
                <el-select v-model="formInline.productCategory" clearable  placeholder="Select">
                    <!-- <el-option-group
                        v-for="group in options"
                        :key="group.categoryId"
                        :label="group.name"
                        >
                        <el-option
                            v-for="item in group.children"
                            :key="item.categoryId"
                            :label="item.name"
                            :value="item.name"
                        >
                    </el-option>
                    </el-option-group> -->
                    <el-option
                            v-for="item in options"
                            :key="item.categoryId"
                            :label="item.name"
                            :value="item.categoryId"
                        >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="formInline.name" placeholder="输入商品信息" @input="inputCommodity"></el-input>
            </el-form-item>
            <!-- <el-form-item  label="时间">
                <el-date-picker
                    v-model="value1"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    >
                </el-date-picker>
            </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import  { List,category } from '@/apis/modules/productList'
import { ref, reactive, toRefs, onBeforeMount,getCurrentInstance,nextTick } from "vue";
export default {
    name:"product-list-searchFrom",
    setup(){
        const { proxy } = getCurrentInstance()
        const state = reactive({
            value1:[],
            formInline: {
                name: '',
                productCategory: '',
            },
            options:[],
        })
        onBeforeMount(()=>{
           initTree()
           onSubmit()
        })
        const initTree = async()=>{
            let res = await category()
            state.options = res.data
        }
        const onSubmit = () =>{
            postdata()
        }
        const onReset  = () =>{
            for(var i in state.formInline){
                state.formInline[i] = ''
            }
            postdata()
        }
        const postdata = () =>{
            proxy.$emit('submitData',state.formInline)
        }
        const inputCommodity = (val) =>{
            console.log(val)
        }
        return {
            ...toRefs(state),
            onSubmit,
            inputCommodity,
            onReset
        }
    }
}
</script>
<style lang="scss" scoped>

</style>